<template>
    <div class="sysTab">
        <div class="tabs-box">
            <el-tabs type="card" closable v-model="active" @tab-remove="doClose" @tab-change="doSelect">
                <el-tab-pane v-for="item in dataList" :key="item.id" :name="item.path" :label="item.name"></el-tab-pane>
            </el-tabs>
        </div>
        <div class="handle">
            <el-popover v-model:visible="show" :teleported="false" :offset="18" width="80px" trigger="click">
                <template #reference>
                    <el-icon size="17" color="#ffffff"><Filter /></el-icon>
                </template>
                <ul class="homeTab_menu">
                    <li @click="doTabFilter('left')">关闭左侧</li>
                    <li @click="doTabFilter('right')">关闭右侧</li>
                    <li @click="doTabFilter('other')">关闭其他</li>
                    <li @click="doTabFilter('all')">全部关闭</li>
                </ul>
            </el-popover>
        </div>
    </div>
</template>

<script>
export default {
    name: "customTab",
    data() {
        return {
            show: false,
            active: '',
            dataList: [],
            homeInfo: {}
        }
    },
    methods: {
        doSelect(path) {
            this.active = path
            const currentTab = this.dataList.filter(item => {
                return item.path === path
            })[0]
            this.$store.commit('menuState', {
                defaultOpeneds: [currentTab.id],
                defaultActive: currentTab.id,
            })
            this.$emit('menuScroll', currentTab.id)
            this.$router.push({name: path})
        },

        // 关闭tab
        doClose(path) {
            if(this.dataList.length === 1 && path === 'home') {
                return
            }
            this.dataList = this.dataList.filter(item => {
                return item.path !== path
            })
            if (path === this.active) {
                if (this.dataList.length === 0) {
                    this.dataList.push(this.homeInfo)
                }
                let lastTab = this.dataList[this.dataList.length - 1]
                this.active = lastTab.path
                this.$store.commit('menuState', {
                    defaultOpeneds: [lastTab.id],
                    defaultActive: lastTab.id,
                })
            }
            this.setCache()
        },

        doTabFilter(e) {
            let currentTabIndex = 0
            this.dataList.forEach((item, index) => {
                if(item.path === this.active) {
                    currentTabIndex = index
                }
            })
            switch(e) {
                case 'left':
                    this.dataList.splice(0, currentTabIndex)
                    break;
                case 'right':
                    this.dataList.splice(currentTabIndex + 1, this.dataList.length)
                    break;
                case 'other':
                    this.dataList = this.dataList.filter((item, index) => {
                        return index === currentTabIndex
                    })
                    break;
                case 'all':
                    this.active = 'home'
                    this.$store.commit('menuState', {
                        defaultOpeneds: [this.homeInfo.id],
                        defaultActive: this.homeInfo.id,
                    })
                    this.dataList = [this.homeInfo]
                    break;
                default:
                    break;
            }
            this.setCache()
            this.show = false
        },

        setTab(e) {
            const len = this.dataList.filter(item => {
                return item.name === e.name
            }).length
            if(!len) {
                this.dataList.push(e)
                this.setCache()
            }
            this.active = e.path
        },
        
        // 设置缓存
        setCache() {
            let paths = []
            this.dataList.forEach(item => {
                if(item.name !== '首页') {
                    paths.push(item.path)
                }
            })
            this.$store.commit('include', paths)
        }
    }
}
</script>

<style lang="less" scoped>
.sysTab{
    display:flex;
    justify-content: space-between;
    align-items: center;
    .tabs-box{
        width: calc(100% - 30px);
        :deep(.el-tabs){
            --el-tabs-header-height: 35px;
            .el-tabs__header {
                margin: 0;
            }
            .el-tabs__nav-prev, .el-tabs__nav-next{
                background: #f1f1f1;
            }
        }
        :deep(.el-tabs--card>.el-tabs__header .el-tabs__item.is-active){
            background: #16baaa;
            color: #ffffff;
            border-bottom-color: #16baaa;
        }
        :deep(.el-tabs--card>.el-tabs__header .el-tabs__nav){
            border-top: none;
            border-left: none;
            border-bottom: none;
            border-right: #e4e7ed solid 1px;
        }
    }
    .handle{
        width: 30px;
        height: 35px;
        border-bottom: #e4e7ed solid 1px;
        background: #FF5722;
        display: flex;
        justify-content: center;
        align-items: center;
        cursor: pointer;
        :deep(.el-popover.el-popper){
            padding: 0 !important;
            min-width: 80px !important;
            .homeTab_menu{
                list-style-type:none;
                font-size: 14px;
                >li{
                    text-align: center;
                    padding: 5px 0;
                    color: #898789;
                    &:hover{
                        background: #FF5722;
                        color: #ffffff;
                        cursor:pointer
                    }
                    &:first-child{
                        border-radius: 4px 4px 0 0;
                    }
                    &:last-child{
                        border-radius: 0 0 4px 4px;
                    }
                }
            }
        }
    }
}
</style>